<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echarts</title>
    <script src="../echarts/echarts.min.js"></script>
    <script src="../bootstrap/jquery.3.2.1.min.js"></script>
</head>
<body>
    <div>
        考试：<select>
        <option value="1">2020一中高三上第一次模拟考试</option>
        <option value="2">2020巴中高三上全市第一次统考</option>
        <option value="3">2020一中高三上10月月考</option>
    </select><br><br>
</div>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        $(document).ready(function () {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            //数据加载完之前先显示一段简单的loading动画
            myChart.showLoading();
            $.ajax({
                url: "../echarts/radar",    //请求发送到TestServlet处
                dataType: "json",        //返回数据形式为json
                success: function (result) {
                    var data = result.data;
                    let  scorelist = data.scores;
                    let indicators = [];
                    let student_scores = [];
                    let class_scores = [];
                    console.log(scorelist);
                    for (const subjectScore of scorelist) {
                        let indicator_data = {name:subjectScore.name,max:subjectScore.total};
                        indicators.push(indicator_data);
                        student_scores.push(subjectScore.studentScore);
                        class_scores.push(subjectScore.classScore);

                    }
                    myChart.hideLoading();    //隐藏加载动画
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    myChart.setOption({
                        title:{
                            text:data.testname
                        },
                        tooltip: {},
                        legend: {
                            data: ['个人成绩', '班级成绩']
                        },
                        radar: {
                            // shape: 'circle',
                            name: {
                                textStyle: {
                                    color: '#fff',
                                    backgroundColor: '#999',
                                    borderRadius: 3,
                                    padding: [2, 3]
                                }
                            },
                            indicator: indicators
                        },
                        series: [{
                            name: '个人 vs 班级',
                            type: 'radar',
                            // areaStyle: {normal: {}},
                            data: [
                                {
                                    value: student_scores,
                                    name: '个人成绩'
                                },
                                {
                                    value: class_scores,
                                    name: '班级成绩'
                                }
                            ]
                        }]
                    })
                },
                error : function(errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart.hideLoading();
                }
            })

        })
    </script>
</body>
</html>